<template>
  <div class="panel">
    <div class="header">BT 设置</div>
    <div class="form">
      <div class="row">
        <label>做种完成后保持做种</label>
        <input type="checkbox" v-model="local.btKeepSeeding" />
      </div>
      <div class="row">
        <label>最大连接数</label>
        <input type="number" min="50" v-model.number="local.btMaxPeers" />
      </div>
      <div class="row row-area">
        <label>Tracker 列表</label>
        <textarea v-model="local.btTrackers" placeholder="每行一个 tracker，例如：
udp://tracker.opentrackr.org:1337/announce
udp://tracker.openbittorrent.com:6969/announce
https://tracker.opentrackr.org:443/announce"></textarea>
      </div>
      <div class="actions">
        <button class="primary" @click="onSave">保存</button>
        <button @click="onReset">重置</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, watch } from 'vue'

const props = defineProps({
  settings: { type: Object, default: () => ({}) }
})
const emit = defineEmits(['save-settings'])

const local = reactive({ btKeepSeeding: false, btMaxPeers: 200, btTrackers: '' })

function assignFromProps(){
  local.btKeepSeeding = !!props.settings?.btKeepSeeding
  local.btMaxPeers = props.settings?.btMaxPeers || 200
  local.btTrackers = props.settings?.btTrackers || ''
}

watch(() => props.settings, assignFromProps, { deep: true, immediate: true })

function onSave(){
  emit('save-settings', { btKeepSeeding: local.btKeepSeeding, btMaxPeers: local.btMaxPeers, btTrackers: local.btTrackers })
}
function onReset(){ assignFromProps() }
</script>

<style scoped>
.panel { padding: 12px; display: grid; gap: 12px; }
.header { font-weight: 600; font-size: 14px; }
.form { display: grid; gap: 10px; max-width: 560px; }
.row { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 10px; }
input[type="number"], input[type="text"] { height: 30px; padding: 4px 8px; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; background: transparent; color: #e6e6e6; }
.row-area { grid-template-columns: 180px 1fr; align-items: start; }
textarea { min-height: 110px; padding: 6px 8px; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; background: transparent; color: #e6e6e6; resize: vertical; }
.actions { display: flex; gap: 8px; }
button { height: 30px; padding: 0 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: #e6e6e6; }
button.primary { background: #2b6cb0; border-color: #2b6cb0; }
</style>
